<template>
    <Modal :value="value" @input="handleInput" width="700" class="col-2" :closable="false">
        <div slot="header">
            检验检疫编码列表
            <Icon class="f-fr" type="ios-close" @click="cancelCiq"/>
        </div>
        <div class="content-body">
            <Table highlight-row :columns="ciqOpea" height="360" :data="ciqList" :loading="ciqListLoading"></Table>
        </div>
        <div slot="footer">
            <Button type="default" @click="cancelCiq">取消</Button>
            <Button type="primary" @click="saveCiq">确定</Button>
        </div>
    </Modal>
</template>

<script>
import { getBasicData } from '@/api/declare' // 引入查询订单接口
export default {
    name: 'CiqModel',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        CIQModelParams: {
            default: function () {
                return {
                    codeTs: '',
                    ciqName: '',
                    editORshow: false
                }
            },
            type: Object
        }
    },
    data () {
        return {
            ciqModel: false,
            editORshow: '',
            ciqList: [],
            ciqListLoading: false,
            ciqName: '',
            ciqOpea: [ // 表格
                {
                    title: '单选',
                    key: 'checkBox',
                    width: 70,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Checkbox', {
                                props: {
                                    value: params.row.checkBox
                                },
                                on: {
                                    'on-change': (e) => {
                                        this.ciqList.forEach((items) => { // 先取消所有对象的勾选，checkBox设置为false
                                            this.$set(items, 'checkBox', false)
                                        })
                                        this.ciqList[params.index].checkBox = e // 再将勾选的对象的checkBox设置为true
                                        this.ciqName = params.row.shortName
                                    }
                                }
                            })
                        ])
                    }
                },
                {
                    title: '名称',
                    key: 'shortName',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%',
                                    whiteSpace: 'normal'
                                }
                            }, params.row.shortName)
                        ])
                    }
                },
                {
                    title: 'HS代码',
                    key: 'dataCode',
                    width: 150
                },
                {
                    title: 'HS名称',
                    key: 'dataName',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%',
                                    whiteSpace: 'normal'
                                }
                            }, params.row.dataName)
                        ])
                    }
                }
            ]

        }
    },
    created () {
        this.codeTs = this.CIQModelParams.codeTs
        this.ciqName = this.CIQModelParams.ciqName
        this.editORshow = this.CIQModelParams.editORshow
        this.ciqListLoading = true
        this.getCiqList(this.codeTs)
    },
    methods: {
        // 企业资质 搜索
        getCiqList (codeTs) {
            getBasicData({
                dataMainType: 'CIQ_NAME',
                keyWord: codeTs,
                pageNum: 1,
                pageSize: 999
            }).then(res => {
                this.ciqList = res.data.data.list
                if (this.ciqName) {
                    this.ciqList.forEach((item) => { // 先取消所有对象的勾选，checkBox设置为false
                        if (this.ciqName == item.shortName) {
                            this.$set(item, 'checkBox', true)
                        }
                    })
                }
                this.ciqListLoading = false
            })
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        cancelCiq () {
            this.handleInput(false)
        },

        saveCiq () {
            let data = this.ciqList.find(item => item.checkBox)
            this.$emit(
                'saveCiq',
                data
                    ? {
                        ciqName: data.shortName,
                        ciqCode: data.statCode
                    }
                    : null
            )
            this.cancelCiq()
        }
    }
}
</script>

<style scoped>

</style>
